<template>
  <view class="selectIdentity">
    <view class="selectIdentityName" :style="{ marginTop: isWeChatMP ? '60px' : '' }">
      <text>请选择您的身份</text>
      <text>明确后将为您提供更精准的服务</text>
    </view>
    <view class="selectIdentityFlex" v-for="(item, index) in list" :key="index" @click="changeTab(item.page,index)"
      :style="{
        background: active == index ? 'rgba(27,145,255,0.1000)' : '#f2f2f2',
        borderColor: active == index ? '#1B91FF' : '#f2f2f2',
      }">
      <view class="Flex">
        <image :src="item.image" mode=""></image>
        <text>{{ item.role }}</text>
      </view>
      <uni-icons type="checkbox-filled" size="26" :color="active == index ? '#1B91FF' : '#6666'"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { isWeChatMP } from '@/utils/platform';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  import { identity } from '@/gql/Infusion';
  import { ref } from 'vue';
  // static
  const driver_id = getDriverID();
  const list = ref([]);
  const active = ref(5);
  function changeTab(path : string, index : number) {
    active.value = index
    uni.navigateTo({
      url: path,
    });
  }
  //获取身份列表
  receiver()
  function receiver() {
    const fill_id = uni.getStorageSync('fillingID').toString()
    const payload = {
      query: identity,
      variables: {
        driver_id,
        fill_id
      },
    };
    toPublish('ql/driver/getFillOrderInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      list.value = data.role_list;
    });
  }
</script>

<style lang="less">
  @import url('../tester/less/selectIdentity.less');
</style>